<template>
  <a-card
    :body-style="{ padding: '24px 48px' }"
    :bordered="false"
  >
    <h2 style="margin-bottom: 25px; font-size: 16px;">
      多数据中心调度对象粒度设置
    </h2>
    <p style="margin-bottom: 20px; font-size: 14px;">
      <label class="ant-form-item-required" />请选择可以执行调度的数据中心
    </p>

    <a-checkbox-group
      v-if="settingOptions.length !== 0"
      class="setting-checkbox"
      v-model="settings"
      :options="settingOptions"
    />

    <span
      v-else
      style="margin-left: 4%; font-size: 14px;"
    >
      暂无数据
    </span>

    <div style="margin: 2% 0 0 8%;">
      <a-button
        type="primary"
        style="padding: 0 30px;"
        @click="setCase"
      >
        保存
      </a-button>
    </div>
  </a-card>
</template>

<script>
  import { gPostAction } from '@/api/manage'

  export default {
    name: 'F030301',
    data() {
      return {
        settings: [],
        settingOptions: []
      }
    },
    mounted() {
      this.loadDatacenter()
    },
    methods: {
      loadDatacenter() {
        const postData = {
          pageSize: 99,
          title: "多数据中心调度-调度模型管理-多数据中心调度对象粒度设置",
          content: "查看多数据中心调度对象粒度设置"
        }

        gPostAction("/asset/pageDatacenter", postData).then((res) => {
          if (res.success) {
            this.settingOptions = res.data.list.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            }) || []
            this.settings = res.data.list.filter(item => item.isScheduler === true).map(_ => _.id) || []
          }
        })
      },
      setCase() {
        if (this.settings.length>=1) {
          const postData = {
            datacenterIds: this.settings
          }

          gPostAction('/scheduler/update_scheduler1', postData).then((res) => {
            if (res.success) {
              this.$message.success('操作成功')
            }
          })
        }else {
          this.$message.error("请选择数据中心")
        }
      }
    },
  }
</script>

<style
  lang="less"
  scoped
>
  .setting-checkbox {
    margin-left: 4%;

    /deep/ .ant-checkbox {
      margin-right: 10px;
    }

    /deep/ .ant-checkbox-group-item {
      margin-bottom: 15px;
      display: block;
      font-size: 14px;
    }
  }
</style>
